import React from 'react';
import {NavLink, Outlet, useLocation, useSearchParams} from "react-router-dom";

const FunRouteOne = () => {
    // 第一种接收方案
    // 通过useLocation来接收search传递过来的数据
    // console.log(useLocation());
    // // search是带？号的查询字符串，如果未设置查询字符串，那么值为空字符串
    // const {search} = useLocation();
    // console.log("search", search);// ?id=1000&type=2000
    // let obj = {};
    // search.slice(1).split("&").forEach(item => {
    //     const [key, value] = item.split("=");
    //     obj[key] = value;
    // })
    // console.log("obj", obj)
    // const {id=0,type=0} = obj;

    // 接收方案2-封装为hooks函数
    // const useSearchToObj = function () {
    //     const {search} = useLocation();
    //     let obj = {};
    //     search.slice(1).split("&").forEach(item => {
    //         const [key, value] = item.split("=");
    //         obj[key] = value;
    //     })
    //     return obj;
    // }
    // const {id = 0, type = 0} = useSearchToObj();
    // console.log("useSearchToObj", useSearchToObj())

    // 接收方案3- querystring:可以将字符串转为对象
    // 1- 下载：cnpm install querystring
    // console.log(querystring.parse(useLocation().search.slice(1)))
    // const {id,type} = querystring.parse(useLocation().search.slice(1));

    // 接收方案4 useSearchParams
    // const [search] = useSearchParams();
    // const id = search.get("id");
    // const type = search.get("type");
    // console.log("search", id, type)

    return (
        <div>
            <h1>FunRouteOne</h1>
            <NavLink to={"/home"}>home</NavLink>
            <NavLink to={"/one/team/123"}>/one/team</NavLink>
            <Outlet/>
        </div>
    );
};

export default FunRouteOne;